<template>
  <ScreenLayoutWithMenu title="项目管理监控大屏">
    <div class="screen-grid grid-3x2">
      <ChartCard title="项目进度趋势" grid-area="a">
        <ECharts :option="progressOption" />
      </ChartCard>
      <ChartCard title="项目状态分布" grid-area="b">
        <ECharts :option="statusOption" />
      </ChartCard>
      <ChartCard title="项目指标" grid-area="c">
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-value">45</div>
            <div class="stat-label">进行中</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">12</div>
            <div class="stat-label">已完成</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">85.6%</div>
            <div class="stat-label">按时完成率</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="项目优先级" grid-area="d">
        <ECharts :option="priorityOption" />
      </ChartCard>
      <ChartCard title="资源使用" grid-area="e">
        <ECharts :option="resourceOption" />
      </ChartCard>
      <ChartCard title="任务完成度" grid-area="f">
        <ECharts :option="taskOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const progressOption = ref({})
const statusOption = ref({})
const priorityOption = ref({})
const resourceOption = ref({})
const taskOption = ref({})

onMounted(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月']
  
  progressOption.value = getLineOption({
    categories: months,
    series: [{
      name: '完成度',
      data: [45, 52, 58, 65, 72, 85.6]
    }]
  })

  statusOption.value = getBarOption({
    categories: ['进行中', '已完成', '暂停', '取消'],
    series: [{
      name: '项目数',
      data: [45, 12, 3, 1]
    }]
  })

  priorityOption.value = getPieOption({
    name: '优先级',
    data: [
      { value: 15, name: '高' },
      { value: 25, name: '中' },
      { value: 21, name: '低' }
    ]
  })

  resourceOption.value = getBarOption({
    categories: ['人力', '时间', '预算'],
    series: [{
      name: '使用率',
      data: [75, 68, 82]
    }]
  })

  taskOption.value = getLineOption({
    categories: months,
    series: [{
      name: '完成率',
      data: [65, 70, 72, 75, 78, 85.6]
    }]
  })
})
</script>
